<script setup lang="ts">
import { computed } from 'vue';

interface InfoConfig {
  title: string;
  value: number | string;
  unit?: string;
  trend?: 'down' | 'stable' | 'up';
  trendValue?: string;
  description?: string;
}

const props = defineProps<{
  config: InfoConfig;
}>();

const trendIcon = computed(() => {
  switch (props.config.trend) {
    case 'down': {
      return 'ArrowDown';
    }
    case 'stable': {
      return 'Minus';
    }
    case 'up': {
      return 'ArrowUp';
    }
    default: {
      return 'Minus';
    }
  }
});

const trendClass = computed(() => {
  switch (props.config.trend) {
    case 'down': {
      return 'text-red-500';
    }
    case 'stable': {
      return 'text-gray-500';
    }
    case 'up': {
      return 'text-green-500';
    }
    default: {
      return 'text-gray-500';
    }
  }
});

const trendText = computed(() => {
  const { trend, trendValue } = props.config;
  if (!trend) return '';

  const baseText = trendValue || '';
  switch (trend) {
    case 'down': {
      return `下降 ${baseText}`;
    }
    case 'stable': {
      return `持平 ${baseText}`;
    }
    case 'up': {
      return `上升 ${baseText}`;
    }
    default: {
      return baseText;
    }
  }
});

// 根据卡片标题确定主题色彩和图标
const cardThemeClass = computed(() => {
  const title = props.config.title;
  if (title.includes('用户')) return 'theme-user';
  if (title.includes('收入') || title.includes('销售')) return 'theme-revenue';
  if (title.includes('订单')) return 'theme-order';
  if (title.includes('转化')) return 'theme-conversion';
  return 'theme-default';
});

const cardIcon = computed(() => {
  const title = props.config.title;
  if (title.includes('用户')) return 'User';
  if (title.includes('收入') || title.includes('销售')) return 'Money';
  if (title.includes('订单')) return 'ShoppingCart';
  if (title.includes('转化')) return 'TrendCharts';
  return 'DataAnalysis';
});
</script>

<template>
  <div
    class="info-card responsive-padding flex h-full flex-col justify-center"
    :class="cardThemeClass"
  >
    <div class="card-content text-center">
      <div class="icon-section responsive-margin">
        <div class="icon-wrapper">
          <el-icon class="card-icon responsive-icon">
            <component :is="cardIcon" />
          </el-icon>
        </div>
      </div>
      <h3 class="card-title responsive-title">
        {{ config.title }}
      </h3>
      <div class="value-section responsive-margin">
        <span class="card-value responsive-value">{{ config.value }}</span>
        <span v-if="config.unit" class="card-unit responsive-text ml-1">{{
          config.unit
        }}</span>
      </div>
      <div
        v-if="config.trend"
        class="trend-section responsive-gap flex items-center justify-center"
      >
        <el-icon :class="trendClass" class="responsive-icon">
          <component :is="trendIcon" />
        </el-icon>
        <span :class="trendClass" class="responsive-small">
          {{ trendText }}
        </span>
      </div>
      <div
        v-if="config.description"
        class="description card-description responsive-small responsive-margin"
      >
        {{ config.description }}
      </div>
    </div>
  </div>
</template>

<style scoped>
.info-card {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: rgb(255 255 255 / 20%);
  border-radius: 50%;
  backdrop-filter: blur(10px);
}

/* 用户统计主题 */
.theme-user {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.theme-user .card-title,
.theme-user .card-value,
.theme-user .card-unit,
.theme-user .card-description {
  color: white;
}

.theme-user .card-icon {
  color: white;
}

/* 收入统计主题 */
.theme-revenue {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.theme-revenue .card-title,
.theme-revenue .card-value,
.theme-revenue .card-unit,
.theme-revenue .card-description {
  color: white;
}

.theme-revenue .card-icon {
  color: white;
}

/* 订单统计主题 */
.theme-order {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.theme-order .card-title,
.theme-order .card-value,
.theme-order .card-unit,
.theme-order .card-description {
  color: white;
}

.theme-order .card-icon {
  color: white;
}

/* 转化率主题 */
.theme-conversion {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.theme-conversion .card-title,
.theme-conversion .card-value,
.theme-conversion .card-unit,
.theme-conversion .card-description {
  color: white;
}

.theme-conversion .card-icon {
  color: white;
}

/* 默认主题 */
.theme-default {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

.theme-default .card-title,
.theme-default .card-value,
.theme-default .card-unit,
.theme-default .card-description {
  color: #333;
}

.theme-default .card-icon {
  color: #666;
}

/* 趋势颜色保持不变 */
.text-green-500 {
  color: #10b981 !important;
}

.text-red-500 {
  color: #ef4444 !important;
}

.text-gray-500 {
  color: #6b7280 !important;
}
</style>
